<template>
	<div class="article-list" ref="article-list">
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh"  success-text="刷新成功">
		  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		  	<back-list v-for="(article,index) in list" :key="index" :article="article"/>
		  </van-list>
		</van-pull-refresh>
		
	</div>
</template>

<script>
	import {
		getArticles
	} from '../../../utils/article.js'
	import BackList from '../../../components/article-item/index.vue'

	export default {
		name: 'ArticleList',
		components: {
			BackList
		},
		props: {
			channel: {
				type:Object,
				required:true
			}
		},
		data() {
			return {
				list: [],
				loading: false,
				finished: false,
				timestamp:null,
				isLoading: false,  //下拉刷新
			}
		},
		mounted() {
			  
		},
		created() {

		},
		methods: {
			async onLoad() {
				const {
					data
				} = await getArticles({
					channel_id: this.channel.id, //频道ID
					timestamp: this.timestamp || Date.now(),
					with_top: 1
				})
				console.log(data)
				const { results } = data.data
				this.list.push(...results)
				
				this.loading = false
				
				if(results.length) {
					this.timestamp = data.data.pre_timestamp
				}else {
					this.finished = true
				}
			},
			async onRefresh() {
			    const {
			    	data
			    } = await getArticles({
			    	channel_id: this.channel.id, //频道ID
			    	timestamp: Date.now(),
			    	with_top: 1
			    })
			    
			    const { results } = data.data
			    this.list.unshift(...results)
					
					this.isLoading = false
			    
			    
			 },
		}

	}
</script>

<style scoped="scoped">
	.article-list {
		padding-bottom: 50px;
	}
</style>
